<template>
	<view>
		<u-navbar :isBack="true" title="设置" title-color="#101010"></u-navbar>

		<view style="display: flex; flex-direction: column;">
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 120rpx; align-items: center;"
				@click="uploadimg">
				<text style="flex: 1;">头像</text>
				<image style="width: 100rpx; height: 100rpx; border-radius: 50%;" :src="userModel.avatar"></image>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;"
				@click="changeNickname">
				<text style="flex: 1;">昵称</text>
				<text style="color: #666">{{userModel.nickname}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-gap height="24" bg-color="#F5F5F5"></u-gap>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;">
				<text style="flex: 1;">是否开启消息推送</text>
				<text style="color: #666">暂不支持</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;"
				@click="changeMobile">
				<text style="flex: 1;">绑定手机</text>
				<text style="color: #666">{{userModel.mobile}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;"
				@click="changePwd">
				<text style="flex: 1;">登录密码</text>
				<text style="color: #666">修改密码</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;"
				@click="changeCertification">
				<text style="flex: 1;">实名认证</text>
				<text style="color: #666">{{userModel.hasCertification ? '已认证' : '未认证'}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;"
				@click="changePayPwd">
				<text style="flex: 1;">支付密码</text>
				<text style="color: #666">{{ paypwdtext }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;"
				@click="changeZfb">
				<text style="flex: 1;">绑定支付宝</text>
				<text style="color: #666">支付宝账号</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-gap height="24" bg-color="#F5F5F5"></u-gap>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;">
				<text style="flex: 1;">用户协议</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;">
				<text style="flex: 1;">隐私协议</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;">
				<text style="flex: 1;">注销账号</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view
				style="display: flex; flex-direction: row; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFF; line-height: 100rpx; align-items: center;"
				@click="logout">
				<text style="flex: 1;">退出登录</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-popup :show="nickOpen" type="bottom">
			<view
				style="width: 100vw; background-color: #FFF; padding: 30rpx; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;">
				<view style="margin-top: 40rpx; margin-bottom: 20rpx; font-size: 34rpx; font-weight: bold;">修改昵称</view>
				<view style="display: flex; flex-direction: column; width: 90%;">
					<text style="color: #666; margin-bottom: 20rpx;">昵称</text>
					<view style="background-color: #F6F6F6; border-radius: 20rpx; padding: 20rpx;">
						<input type="text" placeholder="输入您的新昵称" v-model="newName"
							style="font-size: 32rpx; font-weight: bold;" />
					</view>
				</view>
				<view
					style="display: flex; flex-direction: row; margin-top: 40rpx; width: 100%; line-height: 70rpx; font-size: 32rpx;">
					<view style="flex: 1; width: 50%; text-align: center;" @click="cancelNickname">取消</view>
					<view style="flex: 1; width: 50%; text-align: center; color: #FC7404 ;" @click="confirmNickname">确认
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <uni-popup ref="frmZfb" type="bottom">
			<view style="width: 100vw; background-color: #FFF; padding: 30rpx; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;">
				<view style="margin-top: 40rpx; margin-bottom: 20rpx; font-size: 34rpx; font-weight: bold;">绑定支付宝账号</view>
				<view style="display: flex; flex-direction: column; width: 90%;">
					<text style="color: #666; margin-bottom: 20rpx;">支付宝账号</text>
					<view style="background-color: #F6F6F6; border-radius: 20rpx; padding: 20rpx;">
						<input type="text" placeholder="输入您的支付宝账号" v-model="newZfb" style="font-size: 32rpx; font-weight: bold;" />
					</view>
				</view>
				<view style="display: flex; flex-direction: row; margin-top: 40rpx; width: 100%; line-height: 70rpx; font-size: 32rpx;">
				<view style="flex: 1; width: 50%; text-align: center;" @click="cancelZfb">取消</view>
				<view style="flex: 1; width: 50%; text-align: center; color: #FC7404 ;" @click="confirmZfb">确认</view>
				</view>
			</view>
		</uni-popup> -->

		<!-- <uni-popup ref="frmMobile" type="bottom">
			<view style="width: 100vw; background-color: #FFF; padding: 30rpx; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;">
				<view style="margin-top: 40rpx; margin-bottom: 20rpx; font-size: 34rpx; font-weight: bold;">绑定手机号</view>
				<view style="display: flex; flex-direction: column; width: 90%;">
					<text style="color: #666; margin-bottom: 20rpx;">手机号</text>
					<view style="background-color: #F6F6F6; border-radius: 20rpx; padding: 20rpx; display: flex; flex-direction: row; align-items: baseline;">
						<input type="number" placeholder="输入您的新手机号" v-model="newMobile" style="flex: 1; font-size: 32rpx; font-weight: bold;" />
						<text style="color:#FC7404;" @click="sendChangeSms">{{ txtCountDown }}</text>
					</view>
					<text style="color: #666; margin-bottom: 20rpx;">验证码</text>
					<view style="background-color: #F6F6F6; border-radius: 20rpx; padding: 20rpx;">
						<input type="number" placeholder="输入短信验证码" v-model="newMobileCode" style="font-size: 32rpx; font-weight: bold;" />
					</view>
				</view>
				<view style="display: flex; flex-direction: row; margin-top: 40rpx; width: 100%; line-height: 70rpx; font-size: 32rpx;">
				<view style="flex: 1; width: 50%; text-align: center;" @click="cancelChangeMobile">取消</view>
				<view style="flex: 1; width: 50%; text-align: center; color: #FC7404 ;" @click="confirmChangeMobile">确认</view>
				</view>
      		</view>
    	</uni-popup> -->
	</view>
</template>

<script>
	import configUrl from '@/utils/config.js';
	import {
		request
	} from 'utils/request.js';
	// import { userApi } from '@/common/user.js';
	// import { commonApi } from '@/common/serve.js';
	export default {
		name: "FinanceRegister",
		data() {
			return {
				nickOpen:false,
				changeMobileLock: false,
				newMobileCountDown: 60,
				txtCountDown: "获取验证码",
				newMobile: "",
				newMobileCode: "",
				newName: "",
				newZfb: '',
				paypwdtext: "",
				userModel: [],
				action: '',
			};
		},
		onLoad(e) {
			// let self = this;
			// userApi.getUserInfo().then(res => {
			// 	self.paypwdtext = res.hasPayPwd ? "已设置" : "未设置";
			// 	self.userModel = res;
			// 	self.userModel.avatar = res.avatar.includes('https') ? res.avatar : configUrl.appurlImg + res
			// 		.avatar;
			// });
			request.getWithToken({
				url: '/user/userInfo'
			}).then(res => {
				console.log('userInfo：', res);
				if (res.data.user != 0) {
					let userData = res.data.user;
					this.userData.avatar = userData.avatar;
					this.userData.nickname = userData.nickname;
			
					this.isLogin = true;
					console.log('this.isLogin：', this.isLogin);
				}
			})
			if (e.action == "mobile") {
				self.action = e.action;
			}
			if (e.action == "zfb") {
				self.action = e.action;
			}
		},
		onReady() {
			if (this.action == 'mobile') {
				this.$refs.frmMobile.open();
			}
			if (this.action == 'zfb') {
				this.$refs.frmZfb.open();
			}
		},
		methods: {

			uploadimg() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.$on("cropImageEvent", function(imgPath) {
							// console.log("裁剪图像：" + imgPath);
							uni.$off("cropImageEvent");
							_this.uploadFilePaths(imgPath);
						});
						uni.navigateTo({
							url: '/pages/users/ThumbImageCropper?srcImg=' + res.tempFilePaths[0],
						})
					}
				});
			},
			uploadFilePaths(url) {
				let self = this;
				uni.uploadFile({
					url: configUrl.appurl + `/User/uploadUserThumb`, //仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						console.log('uploadFileRes：', uploadFileRes);
						let result = uploadFileRes.data;
						if (uploadFileRes.statusCode == 401) {
							uni.removeStorageSync('token')
							uni.navigateTo({
								url: '/pages/auth/Login',
							})
						}
						if (uploadFileRes.statusCode == 200) {
							result = JSON.parse(result);
							if (result.code == 1) {
								userApi.getUserInfo().then(res => {
									self.userModel = res;
									self.userModel.avatar = res.avatar.includes('https') ? res.avatar :
										configUrl.appurlImg + res.avatar;
								});
							} else {
								uni.showToast({
									title: result.msg,
									duration: 2000,
									icon: "none",
								});
							}
						}
					}
				});
			},
			submit() {
				let self = this;
				this.formModal.desc_image = this.fileListUrls.join(",");
				this.$refs.form.validate((valid) => {
					if (valid) {
						orderApi.createOrder(self.formModal).then((res) => {
							uni.showToast({
								title: res,
								duration: 2000,
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/common/Home'
								})
							}, 1500);
						});
					}
				});
			},
			confirmNickname() {
				let self = this;
				userApi.updateNickname({
					newName: this.newName
				}).then(res => {
					this.$refs.frmNickname.close();
					userApi.getUserInfo().then(res => {
						self.userModel = res;
						self.userModel.avatar = res.avatar.includes('https') ? res.avatar : configUrl
							.appurlImg + res.avatar;
					});
				});
			},
			cancelNickname() {
				this.newName = "";
				this.nickOpen = true
				this.$refs.frmNickname.close();
			},
			changeNickname() {
				console.log('打开')
				this.nickOpen = true
				
				// this.$refs.frmNickname.open();
			},
			changeZfb() {
				this.$refs.frmZfb.open();
			},
			confirmZfb() {
				let self = this;
				userApi.updateZfb({
					zfb: this.newZfb
				}).then(res => {
					this.$refs.frmZfb.close();
					userApi.getUserInfo().then(res => {
						self.userModel = res;
						// self.userModel.avatar = configUrl.appurlImg + res.avatar;
					});
				});
			},
			cancelZfb() {
				this.zfb = "";
				this.$refs.frmZfb.close();
			},
			changePayPwd() {
				uni.navigateTo({
					url: '/pages/users/PayPassword'
				})
			},
			changeMobile() {
				this.$refs.frmMobile.open();
			},
			sendChangeSms() {
				let self = this;
				if (this.changeMobileLock) return;
				userApi.requestChangeMobile({
					mobile: this.newMobile
				}).then(res => {
					self.changeMobileLock = true;
					let hCountdown = null;
					hCountdown = setInterval(function() {
						if (self.newMobileCountDown > 0) {
							self.newMobileCountDown--;
							self.txtCountDown = self.newMobileCountDown + "秒";
						} else {
							self.newMobileCountDown = 60;
							self.changeMobileLock = false;
							self.txtCountDown = "获取验证码";
							clearInterval(hCountdown);
						}
					}, 1000);
				});
			},
			confirmChangeMobile() {
				let self = this;
				userApi.changeMobile({
					mobile: this.newMobile,
					captcha: this.newMobileCode
				}).then(res => {
					self.changeMobileLock = false;
					self.txtCountDown = "获取验证码";
					self.newMobileCountDown = 60;
					self.$refs.frmMobile.close();
					userApi.getUserInfo().then(res => {
						self.userModel = res;
						self.userModel.avatar = res.avatar.includes('https') ? res.avatar : configUrl
							.appurlImg + res.avatar;
					});
				});
			},
			cancelChangeMobile() {
				this.$refs.frmMobile.close();
			},
			changeCertification() {
				uni.showToast({
					title: "实名认证尚未开放",
					duration: 2000,
					icon: 'none'
				});
			},
			logout() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/menu/home'
				});
			},
			changePwd() {
				uni.navigateTo({
					url: '/pages/users/PwdChange'
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.upload-btn {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		border: 0.5px solid #999;
		border-radius: 8rpx;

		&::before,
		&::after {
			position: absolute;
			left: 50%;
			top: 50%;
			display: block;
			width: 50%;
			border-top: 0.5px solid #999;
			content: '';
			transform: translate(-50%, -50%);
		}

		&::after {
			transform: translate(-50%, -50%) rotate(90deg);
		}
	}

	.tips-text {
		font-size: 24rpx;
		color: #b2b2b2;
	}

	.confirm-btn {
		margin: 22rpx;
		width: calc(100vw - 44rpx);
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background-color: #FC7404;
		// border-radius: 999px;
		border-radius: 24rpx;

		&:active {
			background-color: lighten(#FC7404, 10%);
		}
	}
</style>